const { defineConfig } = require("@vue/cli-service");

const path = require("path");
const settings = require("./src/settings");
// const autoprefixer = require('autoprefixer');
// const pxtoviewport = require('postcss-px-to-viewport');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const port = 9003; // 端口
const name = settings.title;

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_URL : "/",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: process.env.NODE_ENV === "development",
  productionSourceMap: false,
  // css: {
  //   loaderOptions: {
  //     postcss: {
  //       plugins: [
  //         autoprefixer(),
  //         pxtoviewport({
  //           viewportWidth: 375
  //         })
  //       ]
  //     }
  //   }
  // },
  devServer: {
    // host: 'local-ip', // 打开本地ip
    // client: {
    //   // logging: 'info', // 日志
    //   overlay: { // 编译错误或警告时 是否全屏显示
    //     errors: true,
    //     warnings: false,
    //   },
    //   // progress: true, // 在浏览器百分比显示编译进度
    //   // 指定 URL 到 web socket 服务器
    //   // To get protocol/hostname/port from browser
    //   // webSocketURL: 'auto://0.0.0.0:0/ws',
    //   webSocketURL: {
    //     hostname: '0.0.0.0', // 不是真正意义上的IP 是一个本地ip的集合
    //     pathname: '/ws',
    //     port: 0, // 指定port 只在port相同时 会热更新
    //   },
    // },
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: "http://192.168.0.1/api",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          [process.env.VUE_APP_BASE_API]: ""
        }
      }
    }
  },
  // configureWebpack: {
  //   name: name,
  //   resolve: {
  //     alias: {
  //       "@": resolve("src")
  //     }
  //   }
  // },
  chainWebpack(config) {
    config.plugins.delete("preload"); // TODO: need test
    config.plugins.delete("prefetch"); // TODO: need test

    config.plugin('html').tap(args => {
      args[0].title = name
      return args
    })


    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
});
